<template>
  <div class="fault">
    <div class="fault-top">
      <h1
        style="
          font-weight: 700;
          font-style: normal;
          font-size: 24px;
          color: rgb(52, 69, 99);
        "
      >
        装修故障排行
      </h1>
      <el-form :label-position="labelPosition">
        <el-form-item style="float: left; margin: 0; margin-right: 80px">
          <el-col :span="11" style="width: 300px; padding: 0">
            <el-date-picker
              type="date"
              placeholder="开始日期"
              v-model="form.date1"
              style="width: 100%"
              @change="change"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item style="float: right; margin: 0；">
          <el-col :span="11" style="width: 300px; padding: 0">
            <el-date-picker
              type="date"
              placeholder="结束日期"
              v-model="form.date2"
              style="width: 100%"
              @change="change"

            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div ref="main" id="main" style="height: 500px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data: function () {
    return {
      form: {
        date1: "",
        date2: "",
      },
      labelPosition: "left",
      yAxisData: [],
      xAxisData: [],
    };
  },
  mounted: function () {
    this.getData();
  },
  methods: {
    //渲染
    getData: function () {
      this.$axios({
        url: "/breakdown",
        method: "post",
        data: {
          startTime:this.form.date1,
          stopTime:this.form.date2
        },
      }).then(({ data }) => {
        console.log(data);
        let Data = data.data;
        for (let i = 0; i < Data.length; i++) {
          this.yAxisData.push(Data[i].equipmentName);
        }
        for (let i = 0; i < Data.length; i++) {
          this.xAxisData.push(Data[i].num);
        }

        let myChart = echarts.init(this.$refs.main);
        myChart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {},
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            min: 0,
            max: 10,
            interval: 1,
            type: "value",
            boundaryGap: [0, 0.01],
            name: "故障次数",
          },
          yAxis: {
            type: "category",
            data: this.yAxisData,
          },
          series: [
            {
              type: "bar",
              data: this.xAxisData,
            },
          ],
        });
      });
    },
    change:function(){
      this.yAxisData=[]
      this.getData()
    }
  },
};
</script>
<style lang="less" scoped>
.fault {
  padding: 30px;
}
.fault-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}
</style>